<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { searList } from '../../Api/user'
import { useStore } from '../../store/useStore'
//pinia持久化
const store = useStore()
const router = useRouter()
let list = reactive([])
//输入框内容状态
const flag = ref(false)
//用户不存在状态
const isshow = ref(false)

//输入内容
const value = ref('');
//搜索账号
const searUser = () => {
    console.log(value.value);
}
//取消返回上一级
const hisUser = () => {
    history.back()
}
//更新flag的值
const updateInput = () => {
    flag.value = value.value.trim() !== ''
}
//删除输入框内容
const getClose = () => {
    value.value = ''
    flag.value = false
    isshow.value = false
}
//点击判断账号是否存在 存在跳转至该账号 否则显示该用户不存在
const aCount = async () => {
    const res = await searList(value.value)
    // list.value = res.data.data
    // console.log(list.value, '40');
    // console.log(res.data.data, 41);
    if (res !== null && res.data.data !== null) {
        // console.log(res.data.data, 41);
        if (res.data.code === 0) {
            flag.value = false
            store.setData(res.data.data)
            router.push('/contact')
        } else {
            flag.value = false
            isshow.value = true
        }
    } else {
        flag.value = false
        isshow.value = true
    }
}
</script>

<template>
    <div class="getSear">
        <div class="searTop">
            <van-field v-model="value" placeholder="账号/手机号" left-icon="search" @keyup.enter="searUser"
                @input="updateInput">
                <template #button>
                    <van-icon name="close" @click="getClose" />
                </template>
            </van-field>
            <span @click="hisUser">取消</span>
        </div>
        <div class="searmain" v-show="flag">
            <div class="searmain1" @click="aCount">
                <img src="../../../image/image.png" alt="">
                <p>搜索:<span>{{ value }}</span></p>
            </div>
        </div>
        <div class="noExist" v-show="isshow">
            <div class="noExist1">
                <p>该用户不存在</p>
            </div>
            <div class="noExist2">
                <van-icon name="fire-o" color="#ee0a24" size="40" />
                <div class="noExist3">
                    <p>搜一搜 <span style="color:rgb(26, 183, 100)">{{ value }}</span></p>
                    <p><span>小程序</span>、<span>公众号</span>、<span>文章</span><span>朋友圈和表情等</span></p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.getSear {
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
}

.searTop {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-top: 20px;
}

.searTop .van-cell {
    height: 30px;
    border: 1px solid #ccc;
    line-height: 15px;
    border-radius: 5px;
}

.searTop span {
    width: 50px;
    color: rgb(191, 191, 249);
    padding-left: 10px;
}

.searmain {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.searmain1 {
    display: flex;
    align-items: center;
    width: 95%;
    height: 50px;
    margin: 0 auto;
}

.searmain img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.searmain p {
    padding-left: 10px;

}

.searmain p span {
    color: rgb(26, 183, 100);
}

.noExist {
    width: 100%;

}

.noExist1 {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 10px;
}

.noExist2 {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 50px;
    margin-top: 10px;
}

.noExist3 p {
    font-size: 15px;
}
</style>
